<template>
  <el-drawer
    class="dia-style"
    title="规则历史"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    size="50%"
    :wrapper-closable="false"
    @close="cancel">
    <hk-form
      ref="hkFormRef1"
      :form-labels="basicList"
      label-position="right"
      :data="formData"
      :btn-hidden="true"
      @handleEvent="handleEvent" />
    <div class="drawer-container">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in activities"
          :key="index"
          color="#189dff"
          :timestamp="item.timestamp"
          style="padding-top: 10px">
          <div class="text">
            <span>{{ item.createTime }}&nbsp;</span>
            <span style="font-weight: 700">{{ item.moduleName }}&nbsp;</span>
            <span style="font-weight: 700"> {{ item.autoRules == '2' ? '自定义规则' : '默认规则' }}</span>
          </div>
          <div style="padding-top: 10px">
            <span style="font-size: 14px">{{ item.changeContent }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="drawer-footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { changeQuery } from '@/api/specialProject/autoNumber'
import HkForm from '@/components/Hk-Form'

export default {
  components: { HkForm },

  data() {
    return {
      // 表单数据
      formData: {
        time: null,
      },
      basicList: [
        {
          label: '',
          field: 'time',
          type: 'datetimerange',
          span: 24,
          labelWidth: '0px',
        },
      ],
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '120',

      loading: false,
      activities: [],
    }
  },

  mounted() {},
  methods: {
    handleEvent(e) {
      console.log(e, 'ee')
      if (e.value) {
        var obj = {
          startTime: e.value[0],
          endTime: e.value[1],
        }
        console.log(obj, 'ssss')
        changeQuery(obj).then((res) => {
          this.activities = res
        })
      } else {
        changeQuery().then((res) => {
          this.activities = res
        })
      }
    },
    show(data) {
      changeQuery(data).then((res) => {
        this.activities = res
      })
      this.open = true
    },

    // 取消按钮
    cancel() {
      this.open = false
    },
  },
}
</script>

    <style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  height: auto;
}
.text {
  // padding-top: 10px;
}
.el-drawer__body {
  overflow: hidden;
}
.dark-theme {
  span {
    color: #fff !important;
  }
}
.sub-title {
  height: 20px;
  border-left: 2px solid #4b6eef;
  margin-bottom: 22px;

  span {
    margin-left: 8px;
  }
}

.ml10 {
  margin-left: 10px;
}

.mt40 {
  margin-top: 40px;
}
.drawer-container {
  padding: 0;
}
</style>

